<!--
- Author:  LiShibin.
- Date:    2018/8/30.
- File:    transaction.
-->
<template>
  <div class="jiaoyi">
    <div class="jiaoyi_top" >
      <p><span style="float:left;">云宝冻结</span>
        <span @click="gotoTransactionSeller" v-show="this.msgs == 0" style="float:right;"><i class="iconfont icon-yuecopy"  style="padding-right:4px;"></i>我要挂单</span>
        <span @click="gotoTransactionSeller1" v-show="this.msgs == 1" style="float:right;"><i class="iconfont icon-yuecopy"  style="padding-right:4px;"></i>我要挂单</span>
      </p>
      <div style="clear:both;"></div>
      <p>{{memberInfo.freeze_hm}}</p>
      <div style="clear:both;"></div>
    </div>
    <div class="qiehuan">
      <a href="javascript:void(0);"><span :class="{'dq': type == 1}" @click="switchType(1)">交易区</span></a>
      <a href="javascript:void(0);"><span :class="{'dq': type == 0}" @click="switchType(0)">历史记录</span></a>
    </div>

    <!--<div class="transactiontab">-->
      <!--<div class="integrat2 f-cb" style="background-color: #E67A7E;">-->
        <!--<span style="font-size: 12px;float: left;width: 33.3%;text-align: center">冻结云宝:{{memberInfo.freeze_hm}}</span>-->
        <!--&lt;!&ndash;<span style="font-size: 12px;float: left;width: 33.3%;text-align: center">冻结花股:{{memberInfo.freeze_hg}}</span>&ndash;&gt;-->
        <!--&lt;!&ndash;<span style="font-size: 12px;float: left;width: 33.3%;text-align: center">冻结花粉:{{memberInfo.freeze_hf}}</span>&ndash;&gt;-->
        <!--&lt;!&ndash;<router-link :to="{name: 'member-spread'}" class="more">推荐用户购买</router-link>&ndash;&gt;-->
      <!--</div>-->
      <!--<ul class="f-cb">-->
        <!--<li :class="{'on': type == 1}" @click="switchType(1)">交易区</li>-->
        <!--<li :class="{'on': type == 0}" @click="switchType(0)">历史记录</li>-->
      <!--</ul>-->
    <!--</div>-->

    <div class="contbox">
      <!--<div class="Register" style="background: #E67A7E;color: #ffffff;font-size: 20px" @click="gotoTransactionSeller" v-show="this.msgs == 0">我要挂单</div>-->
      <!--<div class="Register" style="background: #E67A7E;color: #ffffff;font-size: 20px" @click="gotoTransactionSeller1" v-show="this.msgs == 1">我要挂单</div>-->
      <!--<div class="inter_tab"  v-infinite-scroll="loadMore"-->
        <!--infinite-scroll-disabled="false"-->
        <!--infinite-scroll-distance="0"-->
        <!--infinite-scroll-immediate-check="false" style="margin-bottom: 30px">-->
        <!--<div v-for="item in historyList.data">-->
          <!--<table width="100%" border="0" @click="gotoTransactionDetail(item.id,item.msgs)" style="border:5px solid white;" v-show="item.seller_name">-->
            <!--<tr>-->
              <!--<td>用户名：{{item.seller_name}}<span v-show="item.seller_name == memberInfo.member_name">(我的)</span></td>-->
              <!--<td>数量：{{item.balance_num}}</td>-->
            <!--</tr>-->
            <!--<tr>-->
              <!--<td width="50%">单价：<span class="cr_f83166">{{item.balance_price}}</span></td>-->
              <!--<td width="50%">总额：<span class="cr_f83166">{{item.amount}}</span></td>-->
            <!--</tr>-->
            <!--<tr>-->
              <!--<td width="50%"><span>挂单时间：{{item.addtime | timestampToDate('yyyy-MM-dd hh:mm')}}</span></td>-->
              <!--<td width="50%" v-show="item.uptime != 0"><span>下单时间：{{item.uptime | timestampToDate('yyyy-MM-dd hh:mm')}}</span></td>-->
            <!--</tr>-->
          <!--</table>-->
        <!--</div>-->
      <!--</div>-->

      <div :class="{'TradingArea': type == 1, 'SalesRecord': type == 0}" v-infinite-scroll="loadMore"
           infinite-scroll-disabled="false"
           infinite-scroll-distance="0"
           infinite-scroll-immediate-check="false" style="padding-top: 38px;">
        <div>
          <ul>
            <li v-for="item in historyList.data" @click="gotoTransactionDetail(item.id,item.msgs)" v-show="item.seller_name">
              <p>
                <span class="name">{{item.seller_name}}</span>
                <span class="time">{{item.addtime | timestampToDate('yyyy-MM-dd hh:mm')}}</span>
              </p>
              <div>
                <span class="zhuangtai_Sell" v-show="item.seller_name == memberInfo.member_name && type == 0">卖<br>出</span>
                <span class="zhuangtai_Purchase" v-show="item.seller_name != memberInfo.member_name && type == 0">买<br>入</span>
                <ul>
                  <li><span >{{item.balance_price}}<br><b>单价</b></span></li>
                  <li><span>{{item.balance_num}}<br><b>数量</b></span></li>
                  <li><span>{{item.amount}}<br><b>总额</b></span></li>
                </ul>
              </div>
            </li>

          </ul>

        </div>
      </div>
      <loading-more style="margin-top: 40px;" :allLoaded="historyList.allLoaded" :show="historyList.data.length > 0"></loading-more>
      <empty-data style="margin-top: 140px;" :show="historyList.allLoaded && historyList.data.length <= 0"></empty-data>
    </div>
    <!--<back-nav></back-nav>-->
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'

  export default {
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({need: ['memberInfo']})
    ],
    data() {
      return {
        historyList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        type: 1,
        msgs: 0
      }
    },
    components: {},
    created() {
      this.initBalanceHistory()
    },
    methods: {
      gotoTransactionDetail(id, msgs) {
        // this.$toast(id)
        // if (msgs == 1) {
        //   this.$messageBox.alert('交易区的交易时间为10:00-15:00,当前不可进入详情页').then(data => {})
        // } else {
        this.$router.push({name: 'transfer-transactionDetail', params: {id: id, type: this.type}})
        // }
      },
      gotoTransactionSeller() {
        this.$router.push({name: 'transfer-transactionSeller'})
      },
      gotoTransactionSeller1() {
        this.$messageBox.alert('交易区的交易时间为工作日10:00-15:00').then(data => {})
      },
      initBalanceHistory() {
        this.historyList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.transactionArea(this.historyList.page, this.historyList.pageSize)
      },
      initransactionList() {
        this.historyList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getTransactionList(this.historyList.page, this.historyList.pageSize)
      },
      switchType(value) {
        this.type = value
        if (this.type == 1) {
          this.initBalanceHistory()
        } else if (this.type == 0) {
          this.initransactionList()
        }
      },
      loadMore() {
        if (this.type == 1) {
          if (this.historyList.loading || this.historyList.allLoaded) { // 正在加载 或 已取得全部数据
            return
          }
          setTimeout(() => {
            this.transactionArea(++this.historyList.page, this.historyList.pageSize)
          }, 500)
        } else if (this.type == 0) {
          if (this.historyList.loading || this.historyList.allLoaded) { // 正在加载 或 已取得全部数据
            return
          }
          setTimeout(() => {
            this.getTransactionList(++this.historyList.page, this.historyList.pageSize)
          }, 500)
        }
      },
      transactionArea(page, pageSize) {
        this.$request.transactionArea(page, pageSize).then(data => {
          if (data.length < this.historyList.pageSize) {
            this.historyList.allLoaded = true
          }
          this.historyList.data = [...this.historyList.data, ...data]
          this.msgs = this.historyList.data[0].msgs
          console.log(this.msgs)
        }).finally(() => {
          this.historyList.requested = true
          this.historyList.loading = false
        })
      },
      getTransactionList(page, pageSize) {
        // this.$toast(page.toString())
        this.$request.getTransactionList(page, pageSize).then(data => {
          if (data.length < this.historyList.pageSize) {
            this.historyList.allLoaded = true
          }
          this.historyList.data = [...this.historyList.data, ...data]
          console.log(this.historyList.data)
          // this.historyList.data[0].msgs = 0
        }).finally(() => {
          this.historyList.requested = true
          this.historyList.loading = false
        })
      }
    }
  }
</script>

<style>

</style>
